<template>
  <div class="map">
    <ve-map 
      ref="chart"
      :data="chartData"
      :settings="chartSettings"
      :extend="chartExtend"
      width="38rem"
      :height="mapHeight"
      >
    </ve-map>       
  </div>
</template>

<script>
// let echarts = require('echarts/lib/echarts')
import Vmap from 'v-charts/lib/map.common'
import china from 'echarts/map/json/china.json'
import { formatFontSize } from 'js/utils'
export default {
  components: {
    [Vmap.name]: Vmap
  },
  props: {
    dtAll: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data () {
    return {  
      mapHeight: '34rem',
      chartData: {
        columns: ['name', 'zfwrks', 'zglhs','zglmj','zglxms'],
        rows: this.dtAll
      },
      chartSettings: {
        position: 'china',
        mapOrigin: china,
        label: false,
        dataType: {
          'name': 'normal',
          'zfwrks': 'normal',
          'zglhs': 'normal',
          'zglmj': 'normal',
          'zglxms': 'normal'
        },
        labelMap: {
          'name': '地区',
          'zglxms': '管理项目数',
          'zglmj': '管理面积',
          'zglhs': '管理户数',
          'zfwrks': '服务人口数量'
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              fontSize: formatFontSize(0.1),
              color: '#ccc',
            },
            areaColor: '#606981',
            borderColor: '#ccc',
            // opacity: 0.3
          },
          emphasis: {
            label: {
              // show: false,
              color: '#000',
              fontSize: formatFontSize(0.1),
            },
            areaColor: 'rgba(255,234,0)',
            // opacity: 1
          }
        },
        zoom: 1,
        selectData: true,
      },
      chartExtend: {
        tooltip: {
          trigger: false
        },
        legend: {
          show: false,
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.12)
          },
          itemWidth: formatFontSize(0.20),
          itemHeight: formatFontSize(0.12),
        },
        series: {
          showLegendSymbol: false,
          top: '5%',
        }
      }
      
    }
  },
  watch: {
    dtAll(val) {
      this.chartData.rows = val
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss">
.map {
  width: 100%;
}
</style>>
